@import './reset.scss';
@import './libs/hint.css';
@import './libs/animate.css';
@import './libs/font-awesome.css';
@import './iconfont.scss';
@import './variable.scss';

html, body {
    height: 100%;
}

body {
    display: block!important;
    -webkit-font-smoothing: auto!important;
    -moz-osx-font-smoothing: auto!important;
    font-family: -apple-system,system-ui,BlinkMacSystemFont,Helvetica Neue,PingFang SC,Hiragino Sans GB,Microsoft YaHei,Arial,sans-serif;;
    font-size: 14px;
    line-height: 1.42857;
    color: #333;
    background-color: #fff;
    box-sizing: border-box;
}

.category-nav-box {
    border-bottom: 1px #f0f0f0 solid;
    background: #fff;
    margin-top: 57px;
    margin-bottom: 20px;
}

.category-nav {
    width: 960px;
    margin: 0 auto;
    height: 46px;
    line-height: 46px;
}

.category-list li {
    float: left;
    margin-right: 20px;
}

.category-item {
    color: #909090;
}

.category-item:hover {
    color: #ea6f5a;
    text-decoration: none;
}

.category-item-select {
    color: #ea6f5a;
}

.category-item-select:hover {
    text-decoration: none;
}

.category-manage {
    float: right;   
    color: #333;
    cursor: pointer;
}

.errortip-msg {
    border: 1px #e84e18 solid;
    color: #e84e18;
    line-height: 36px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
    position: fixed;
    width: 300px;
    margin-left: -150px;
    left: 50%;
    top: 60px;
    background: #fff;
    text-align: center;
    z-index: 2000;
}

.successtip-msg {
    border: 1px #2ece42 solid;
    color: #1db030;
    line-height: 36px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 5px;
    box-shadow: 0 0 8px rgba(0,0,0,.1);
    position: fixed;
    width: 300px;
    margin-left: -150px;
    left: 50%;
    top: 60px;
    background: #fff;
    text-align: center;
    z-index: 2000;
}

.clearfix:after, .clearfix:before {
    content: " ";
    display: table;
}

a {
    color: #333;
}

.btn {
    display: inline-block;
    margin-bottom: 0;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    -ms-touch-action: manipulation;
    touch-action: manipulation;
    cursor: pointer;
    background-image: none;
    border: 1px solid transparent;
    white-space: nowrap;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857;
    border-radius: 4px;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    text-decoration: none!important;
}

.btn-success {
    border-radius: 40px;
    color: #fff;
    background-color: #42c02e;
    border-color: #42c02e;
}

.btn-success:hover { 
    color: #fff;
    background-color: #3db922;
    border-color: #318f22;
}

.top-nav {
    width: 100%;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    border-bottom: 1px #f0f0f0 solid;
    z-index: 1000;
    background: #fff;
}

.top-nav:after, .top-nav:before {
    content: " ";
    display: table;
}

nav .width-limit {
    width: 960px;
    margin: 0 auto;
    height: 56px;
    box-sizing: border-box;
}

.logo {
    outline: 0;
    width: 127px;
    float: left;
    height: 56px;
    padding: 0;
    margin-top: 0;
    margin-right: 0;
}

.logo:hover {
    text-decoration: none;
}

.logo img {
    margin-top: 8px;
}

.logo-name {
    width: 60px;
    display: inline-block;
    vertical-align: top;
    line-height: 56px;
    font-size: 24px;
    color: #ea6f5a;
    font-weight: 500;
}

.navbar-nav {
    float: left;
}

.navbar-nav li {
    float: left;
    cursor: pointer;
}

.navbar-nav a {
    display: inline-block;
    height: 56px;
    line-height: 56px;
    padding: 0 20px;
    color: #333;
    font-size: 17px;
    text-decoration: none;
}

.navbar-nav li:hover a {
    color: #ea6f5a;
}

.navbar-nav-select a {
    color: #ea6f5a;
}

.navbar-nav-select:hover {
    background-color: #fff!important;
}

.navbar-nav .search {
    padding-left: 15px;
    height: 56px;
}

.navbar-nav .search:hover {
    background-color: #fff;
}

.navbar-nav form {
    position: relative;
    top: 9px;
}

.navbar-nav .search-input {
    box-sizing: border-box;
    padding: 0 40px 0 20px;
    width: 160px;
    height: 38px;
    font-size: 14px;
    border: 1px solid #eee;
    border-radius: 40px;
    background: #eee;
    transition: width .5s;
    -moz-transition: width .5s;
    -webkit-transition: width .5s;
    -o-transition: width .5s;
    transition-delay: .1s;
    -moz-transition-delay: .1s;
    -webkit-transition-delay: .1s;
    -o-transition-delay: .1s;
}

.navbar-nav .search-input::-webkit-input-placeholder {
    color: #999;
}

.navbar-nav .search-input:focus+.search-btn {
  background-color: #969696;
  border-radius: 50%;
  color: #fff!important;
}

.navbar-nav .search-input:focus {
    transition-delay: 0s;
    -moz-transition-delay: 0s;
    -webkit-transition-delay: 0s;
    -o-transition-delay: 0s;
    width: 240px;
    outline: none;
}

.navbar-nav form .search-btn {
    position: absolute;
    top: 4px;
    right: 5px;
    width: 30px;
    height: 30px!important;
    line-height: normal!important;
    padding: 0!important;
    color: #969696!important;
    text-align: center;
}

.navbar-nav form .ic-search {
    margin: 5px -1px 0 0;
    display: block;
}

.ic-search:before {
    content: "\E618";
}

#navbar-search-tips {
    margin-top: 9px;
    width: 250px;
    left: 0;
    top: 100%;
    border-radius: 4px;
}

#navbar-search-tips, #navbar-search-tips:before {
    position: absolute;
    background-color: #fff;
    box-shadow: 0 0 8px rgba(0, 0, 0, .2);
}

#navbar-search-tips:before {
    content: "";
    left: 27px;
    width: 10px;
    height: 10px;
    transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    top: -5px;
    z-index: -1;
}

#navbar-search-tips:after {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 12px solid transparent;
    border-bottom-color: #fff;
    left: 20px;
    bottom: 99%;
}

#navbar-search-tips .search-trending {
    padding: 20px 20px 10px;
    border-bottom: 1px solid #f0f0f0;
}

.search-trending .search-trending-header {
    height: 20px;
    margin-bottom: 10px;
}

.search-trending .search-trending-header span {
    float: left;
    font-size: 14px;
    color: #969696;
}

.search-trending .search-trending-header a {
    float: right;
    height: auto;
    line-height: normal;
    font-size: 13px;
    color: #969696;
    background-color: transparent;
    border-width: 0;
    padding: 0;
}

.search-trending .search-trending-header i {
    display: inline-block;
    line-height: 1;
    transition: .5s ease;
}

.ic-search-change:before {
    content: "\E6E6";
}

.search-trending .search-trending-tag-wrap {
    font-size: 0;
}

.search-trending .search-trending-tag-wrap li {
    margin-right: 10px;
    display: inline-block;
    line-height: 28px;
    float: none;
}

.search-trending .search-trending-tag-wrap li a {
    padding: 2px 6px;
    font-size: 12px;
    color: #787878;
    border: 1px solid #ddd;
    border-radius: 3px;
    height: auto;
    line-height: 14px;
}

.search-trending .search-trending-tag-wrap li a:hover {
    color: #333;
    border-color: #b4b4b4;
}

#navbar-search-tips .search-recent {
    padding: 5px;
}

#navbar-search-tips .search-recent ul {
    list-style-type: none;
}

#navbar-search-tips .search-recent ul li {
    margin-right: 0;
    float: none;
}

#navbar-search-tips li:hover {
    background: #fff;
}

.search-recent .search-recent-item-wrap li a {
    display: block;
    height: 40px;
    line-height: 20px;
    padding: 10px 15px;
    font-size: 14px;
    color: #333;
    position: relative;
    box-sizing: border-box;
}

.search-recent .search-recent-item-wrap li a:hover {
    background-color: #f0f0f0;
    border-radius: 4px;
}

.search-recent .search-recent-item-wrap li a .ic-search-history {
    float: left;
    margin-right: 10px;
    font-size: 18px;
    color: #787878;
}

.ic-search-history:before {
    content: "\E640";
}

.search-recent .search-recent-item-wrap li a span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    display: block;
    padding-right: 30px;
}

.search-recent .search-recent-item-wrap li a .ic-unfollow {
    position: absolute;
    right: 15px;
    top: 10px;
    color: #a0a0a0;
    display: none;
}

.search-recent .search-recent-item-wrap li a:hover .ic-unfollow {
    display: block;
}

.ic-unfollow:before {
  content: "\E631";
}

.navbar-user {
    float: right;
    margin-right: 0;
    position: relative;
}

.navbar-user .user {
    float: right;
    cursor: pointer;
}

.navbar-user .avatar {
    position: relative;
    display: block;
    font-size: 0;
    height: 40px;
    margin: 8px 0 8px 0;
    width: 58px;
    text-align: right;
}

.navbar-user .avatar img {
    width: 40px;
    height: 40px;
    border: 1px solid #ddd;
    border-radius: 50%;
    position: absolute;
    left: 0;
}

.navbar-user .avatar-img-sep {
    width: 5px;
    height: 40px;
    display: inline-block;
    vertical-align: middle;
}

.navbar-user .avatar .fa-caret-up {
    display: none;
    vertical-align: middle;
    font-size: 14px;
}

.navbar-user .avatar .fa-caret-down {
    vertical-align: middle;
    font-size: 14px;
}

.navbar-user .open .avatar .fa-caret-up {
    display: inline-block;
}

.navbar-user .open .avatar .fa-caret-down {
    display: none;
}

.navbar-user .user .dropdown-menu {
    left: auto;
    right: 0;
    border-radius: 0 0 4px 4px;
}

.open>.dropdown-menu {
    display: block;
}

.dropdown-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    display: none;
    float: left;
    min-width: 160px;
    padding: 5px 0;
    margin: 2px 0 0;
    list-style: none;
    font-size: 14px;
    text-align: left;
    background-color: #fff;
    border: 1px solid #ccc;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
    background-clip: padding-box;
    margin-top: 0;
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .1);
    filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .1));
    -webkit-filter: drop-shadow(0 2px 8px rgba(0, 0, 0, .1));
}

.dropdown-menu li {
    line-height: 20px;
}

.dropdown-menu .dropdown-menu-sep {
    height: 1px;
    line-height: 1px;
    background: #f2f2f2;
}

.dropdown-menu>li>a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857;
    color: #333;
    white-space: nowrap;
}

.dropdown-menu>li>a:hover {
    text-decoration: none;
    background-color: #f5f5f5;
}

.navbar-user .user .dropdown-menu a {
    padding: 6px 20px;
    line-height: 30px;
}

.navbar-user .user .dropdown-menu span {
    vertical-align: middle;
}

.navbar-user .user .dropdown-menu i {
    margin-right: 15px;
    font-size: 18px;
    color: #ea6f5a;
    vertical-align: middle;
}

.ic-navigation-profile:before {
    content: "\E650";
}

.ic-navigation-mark:before {
    content: "\E64F";
}

.ic-navigation-like:before {
    content: "\E654";
}

.ic-paid:before {
    content: "\E64C";
}

.ic-navigation-wallet:before {
    content: "\E653";
}

.ic-navigation-settings:before {
    content: "\E652";
}

.ic-navigation-feedback:before {
    content: "\E655";
}

.ic-navigation-signout:before {
    content: "\E61D";
}

.navbar-signin {
    margin: 11px 6px 0 10px;
    font-size: 15px;
    color: #969696;
}

.navbar-signin:hover {
    color: #969696;
}

.navbar-signup {
    width: 80px;
    line-height: 24px;
    margin: 9px 5px 0 15px;
    border: 1px solid rgba(236,97,73,.7);
    border-radius: 20px;
    font-size: 15px;
    color: #ea6f5a;
    background-color: transparent;
    text-decoration: none;
    box-sizing: border-box;
}

.navbar-signup:hover {
    color: #ec6149;
    border-color: #ec6149;
    background-color: rgba(236,97,73,.05);
    transition: .1s ease-in;
    -webkit-transition: .1s ease-in;
    -moz-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    -ms-transition: .1s ease-in;
}

.write-btn {
    float: right;
    width: 100px;
    height: 40px;
    line-height: 24px;
    margin: 8px 15px 0;
    border-radius: 20px;
    font-size: 15px;
    color: #fff;
    background-color: #ea6f5a;
    box-sizing: border-box;
}

.write-btn:hover {
    color: #fff;
    background-color: #ec6149;
}

.ic-write {
    margin-right: 3px;
    font-size: 19px!important;
    vertical-align: middle;
}

.ic-write:before {
    content: "\E60E";
    box-sizing: border-box;
}

.footer {
    clear: both;
    width: 960px;
    margin: 0 auto;
    margin-bottom: 20px;
}

.footer-row {
    padding-left: 15px;
    width: 625px;
}

.footer .main {
    padding-right: 0;
    font-size: 13px;
    color: #969696;
}

.footer .main a {
    color: #969696;
    display: inline-block;
}

.footer .main a:hover {
    color: #2f2f2f;
    text-decoration: none;
}

.footer .icp, .footer .icp a {
    color: #c8c8c8;
}

.footer .icp {
    margin-top: 10px;
    font-size: 12px;
}

.footer .icp img {
    vertical-align: middle;
    height: 30px;
}

@-webkit-keyframes loading {
    0% {
        width: 60%
    }

    50% {
        width: 100%
    }

    to {
        width: 60%
    }
}

@keyframes loading {
    0% {
        width: 60%
    }

    50% {
        width: 100%
    }

    to {
        width: 60%
    }
}

.popover {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1060;
    /* display: none; */
    max-width: 276px;
    padding: 1px;
    font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
    font-style: normal;
    font-weight: 400;
    letter-spacing: normal;
    line-break: auto;
    line-height: 1.42857;
    text-align: left;
    text-align: start;
    text-decoration: none;
    text-shadow: none;
    text-transform: none;
    white-space: normal;
    word-break: normal;
    word-spacing: normal;
    word-wrap: normal;
    font-size: 14px;
    background-color: #fff;
    background-clip: padding-box;
    border: 1px solid #ccc;
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 6px;
    box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.popover.top {
    margin-top: -10px;
}

.popover.right {
    margin-left: 10px;
}

.popover.bottom {
    margin-top: 10px;
}

.popover.left {
    margin-left: -10px;
}

.popover-title {
    margin: 0;
    padding: 8px 14px;
    font-size: 14px;
    background-color: #f7f7f7;
    border-bottom: 1px solid #ebebeb;
    border-radius: 5px 5px 0 0;
}

.popover-content {
    padding: 9px 14px;
}

.popover>.arrow,.popover>.arrow:after {
    position: absolute;
    display: block;
    width: 0;
    height: 0;
    border-color: transparent;
    border-style: solid;
}

.popover>.arrow {
    border-width: 11px;
}

.popover>.arrow:after {
    border-width: 10px;
    content: "";
}

.popover.top>.arrow {
    left: 50%;
    margin-left: -11px;
    border-bottom-width: 0;
    border-top-color: #999;
    border-top-color: rgba(0,0,0,.25);
    bottom: -11px;
}

.popover.top>.arrow:after {
    content: " ";
    bottom: 1px;
    margin-left: -10px;
    border-bottom-width: 0;
    border-top-color: #fff;
}

.popover.right>.arrow {
    top: 50%;
    left: -11px;
    margin-top: -11px;
    border-left-width: 0;
    border-right-color: #999;
    border-right-color: rgba(0,0,0,.25);
}

.popover.right>.arrow:after {
    content: " ";
    left: 1px;
    bottom: -10px;
    border-left-width: 0;
    border-right-color: #fff;
}

.popover.bottom>.arrow {
    left: 50%;
    margin-left: -11px;
    border-top-width: 0;
    border-bottom-color: #999;
    border-bottom-color: rgba(0,0,0,.25);
    top: -11px;
}

.popover.bottom>.arrow:after {
    content: " ";
    top: 1px;
    margin-left: -10px;
    border-top-width: 0;
    border-bottom-color: #fff;
}

.popover.left>.arrow {
    top: 50%;
    right: -11px;
    margin-top: -11px;
    border-right-width: 0;
    border-left-color: #999;
    border-left-color: rgba(0,0,0,.25);
}

.popover.left>.arrow:after {
    content: " ";
    right: 1px;
    border-right-width: 0;
    border-left-color: #fff;
    bottom: -10px;
}

.side-tool {
    position: fixed;
    bottom: 40px;
    right: 40px;
    z-index: 1040;
}

.side-tool>ul {
    list-style: none;
    border-bottom: 1px solid #dcdcdc;
}

.side-tool>ul>li {
    border: 1px solid #dcdcdc;
    border-bottom: none;
    background-color: #fff;
    transition: .1s ease-in;
    box-sizing: border-box;
    line-height: 20px;
}

.side-tool>ul>li:hover {
    background-color: hsla(0, 0%, 71%, .1);
    transition: .1s ease-in;
}

.side-tool>ul>li>a:hover {
    color: #333;
}

.side-tool>ul .function-button, .side-tool>ul .js-submit-button {
    cursor: pointer;
    box-sizing: border-box;
    width: 50px;
    height: 50px;
    text-align: center;
    display: block;
    text-decoration: none;
}

.side-tool>ul .function-button i, .side-tool>ul .js-submit-button i {
    padding-top: 16px;
    font-size: 20px;
    display: block;
}

.side-tool a {
    color: #333;
}

.ic-backtop:before {
    content: "\E684";
}

.ic-addcollectionmodal:before {
    content: "\E668";
}

.ic-mark:before {
    content: "\E6AF";
}

.ic-share:before {
    content: "\E683";
}

.article-list {
    width: 700px;
}

.article-list-item {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 20px;
    box-sizing: border-box;
    border-bottom: 1px solid #f0f0f0;
    word-wrap: break-word;
}

.article-list li.have-img {
    min-height: 140px;
}

.article-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.5;
    color: #333;
    margin: -7px 0 4px;
    display: inherit;
}

.article-title:hover {
    text-decoration: none;
}

.article-title:visited {
    color: #909090;
}

.article-content {
    margin: 0 0 8px;
    font-size: 13px;
    line-height: 24px;
    color: #999;
}

.article-meta {
    padding-right: 0!important;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}

.article-meta a {
    transition: .1s ease-in;
    -webkit-transition: .1s ease-in;
    -moz-transition: .1s ease-in;
    -o-transition: .1s ease-in;
    -ms-transition: .1s ease-in;
    margin-right: 10px;
    color: #b4b4b4;
}

.article-meta a:hover {
    color: #787878;
    text-decoration: none;
}

.article-meta span {
    margin-right: 10px;
    color: #b4b4b4;
    font-size: 12px;
    font-weight: 400;
    line-height: 20px;
}

.article-meta .paid-meta {
    color: #e2b882!important;
}

.ic-paid:before {
    content: "\E64C";
}

.ic-list-read:before {
    content: "\E662";
}

.article-placeholder {
    position: relative;
    padding: 15px 2px 0 0;
    margin-bottom: 50px;
}

.article-placeholder .img {
    position: absolute;
    bottom: 2px;
    right: 0;
    width: 125px;
    height: 100px;
    border-radius: 4px;
    background-color: #eaeaea;
}

.article-placeholder .content {
    padding-right: 160px;
}

.article-placeholder .title {
    float: none!important;
    width: 50%;
    height: 20px;
    margin: 0 0 15px!important;
    background-color: #eaeaea;
}

.article-placeholder .text {
    width: 100%;
    height: 16px;
    margin: 0 0 10px;
    background-color: #eaeaea;
    -webkit-animation: loading 1s ease-in-out infinite;
    animation: loading 1s ease-in-out infinite;
}

.article-placeholder .animation-delay {
    -webkit-animation: loading 1s ease-in-out -.5s infinite!important;
    animation: loading 1s ease-in-out -.5s infinite!important;
}

.article-placeholder .text {
    width: 100%;
    height: 16px;
    margin: 0 0 10px;
    background-color: #eaeaea;
    -webkit-animation: loading 1s ease-in-out infinite;
    animation: loading 1s ease-in-out infinite;
}

.article-placeholder .meta {
    margin: 0;
    color: #eaeaea;
    font-size: 12px;
}

.article-placeholder .meta .read {
    height: 16px;
    width: 50px;
    display: inline-block;
    vertical-align: middle;
    background-color: #eaeaea;
}

.article-placeholder .meta i {
    margin: 0 5px;
    vertical-align: middle;
}

.article-placeholder .meta .small {
    height: 16px;
    width: 30px;
}

.article-placeholder .meta div {
    display: inline-block;
    vertical-align: middle;
    background-color: #eaeaea;
}

.ic-list-comments:before {
    content: "\E660";
}

.ic-list-like:before {
    content: "\E661";
}

.article-img {
    width: 125px;
    height: 100px;
}

.article-img img {
    width: 100%;
    height: 100%;
    border-radius: 2px;
    border: 1px solid #f0f0f0;
}

.pagination {
    margin: 20px 0;
    text-align: center;
    display: block;
    padding-left: 0;
    border-radius: 4px;
}

.pagination li {
    margin: 0 5px;
    display: inline-block;
}

.pagination li:first-child a, .pagination li:last-child a {
    border-radius: 20px;
}

.pagination a {
    font-size: 14px;
    color: #969696!important;
    border: 1px solid #dcdcdc;
    border-radius: 20px;
}

.pagination>li>a, .pagination>li>span {
    position: relative;
    float: left;
    padding: 6px 12px;
    line-height: 1.42857;
    text-decoration: none;
    color: #337ab7;
    background-color: #fff;
    border: 1px solid #ddd;
    margin-left: -1px;
}

.pagination .active {
    font-weight: 700;
    border: none;
    pointer-events: none;
}

.alert-modal-header {
    padding: 30px;
}

.alert-modal-header h4 {
    margin: 0;
    color: #333;
    text-align: left;
    font-size: 18px;
}

.alert-modal-header .close {
    font-family: $fontFamily;
    float: right;
    line-height: 1;
    color: #000;
    opacity: .2;
    filter: alpha(opacity=20);
    font-weight: 200;
    font-size: 26px;
    outline: none;
    text-shadow: none;
    padding: 0;
    cursor: pointer;
    background: transparent;
    border: 0;
    -webkit-appearance: none;
    margin-top: -4px;
}

.alert-modal-body {
    padding: 0 30px;
    font-size: 14px;
    color: #333;
    display: flex;
}

.alert-modal-footer {
    padding: 20px;
    height: 80px;
    background-color: #fff;
}

.alert-modal-footer button {
    padding: 0;
    margin: 0;
    background-color: transparent;
    border: 0;
    float: right;
    font-size: 13px;
}

.alert-modal-footer .submit {
    margin-left: 30px;
    color: #ea6f5a;
    border-color: rgba(236, 97, 73, 0.7);
    padding: 5px 22px;
    border: 1px solid;
    border-radius: 3px;
    height: 32px;
    line-height: 20px;
    box-sizing: border-box;
}

.alert-modal-footer .submit:hover {
    border-color: #ea6f5a;
    background-color: rgba(236, 97, 73, .05);
}

.alert-modal-footer .cancel {
    color: #969696;
    height: 32px;
    line-height: 32px;
}

.alert-modal-footer .cancel:hover {
    color: #333;
}

.recommended-authors .title .page-change {
    float: right;
    font-size: 14px;
    color: #969696;
}

.recommended-authors .title .page-change i {
    display: inline-block;
    line-height: 1;
    transition: .5s ease;
}

.ic-search-change:before {
    content: "\E6E6";
}

.recommended-authors .item .link {
    padding: 12px 16px;
    display: flex;
    align-items: center;
}

.recommended-authors .recommended-avatar {
    display: inline-block;
    position: relative;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #eee;
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    margin-right: 10px;
}

.recommended-authors .user-info {
    overflow: hidden;
    text-align: left;
}

.recommended-authors .username {
    font-size: 14px;
    font-weight: 400;
    color: #333;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 3px;
}

.recommended-authors .username:hover {
    text-decoration: none;
}

.recommended-authors .rank {
    margin-left: 4px;
    vertical-align: middle;
}

.recommended-authors .rank img {
    width: auto!important;
    height: auto!important;
}

.recommended-authors .link .position, .recommended-authors .link .description {
    color: #909090;
    font-size: 12px;
    margin-bottom: 3px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.recommended-authors .item .more {
    display: block;
    color: #ea6f5a;
    padding: 12px 0;
    text-align: center;
    border-top: 1px solid hsla(0, 0%, 59.2%, .1);
}

.recommended-authors .item .more:hover {
    text-decoration: none;
}

.ic-link:before { 
    content: "\E616"; 
}